{% extends "base.html" %}
{% load comments %}

{% block style %}
    <link rel="stylesheet" type="text/css" href="/static_media/css/user/view_images.css">
{% endblock style %}

{% block script %}
{% endblock script %}

{% block content %}
		<div class="item">
			<div class="galleryContainer">
				<div id="gallery">
					<div id="navPrev">
					{% if fromExcursion %}
						<form action="/user/excursion/{{excursionItem.pk}}/images/0/{{pIndex}}/" method="get" class="formItem">
							<input type="submit" value=" " id="prevButton" class="button"/>
						</form>
					{% else %}
						<form action="/outcrop/view_images/{{outcrop.pk}}/0/{{pIndex}}/" method="get" class="formItem">
							<input type="submit" value=" " id="prevButton" class="button"/>
						</form>
					{% endif %}
					</div>
					<div id="imageItem">
						<a href="{{ image.image.url }}">
							<img src="{{ image.image.gallery_image.url }}" title="{{ image.name }}" alt="{{ image.description }}" class="image" />
						</a>
					</div>
					<div id="navNext">
					{% if fromExcursion %}
						<form action="/user/excursion/{{excursionItem.pk}}/images/0/{{nIndex}}/" method="get" class="formItem">
							<input type="submit" value=" " id="nextButton" class="button"/>
						</form>
					{% else %}
						<form action="/outcrop/view_images/{{outcrop.pk}}/0/{{nIndex}}/" method="get" class="formItem">
							<input type="submit" value=" " id="nextButton" class="button"/>
						</form>
					{% endif %}
					</div>
					<div id="navCount">
						{{current}} of {{count}}
					</div>
				</div>
				<div id="description">
					<div class="itemHeading"> {{ image.name }} </div>
					<div id="text">
						{{ image.notes|linebreaksbr }}
					</div>
      			</div>
			</div>
            <div id="commentContainer">
				{% get_comment_list for image as comment_list %}
				{% for comment in comment_list %}
					<div class="comment">
						<div class="commentHeader">
							<div class="username"> {{comment.user_name}} </div>
							<div class="date"> {{comment.submit_date}} </div>
						</div>
						<div class="commentText">
							{{comment.comment|linebreaksbr}}
						</div>
					</div>
				{% endfor %}
				
				{% if user.is_authenticated %}
					{% get_comment_form for image as form %}
					<div id ="commentForm">
						<div class="itemHeading"> Add A New Comment </div>
						<form action="{% comment_form_target %}" method="POST">
							{% csrf_token %}
							{{ form.comment }}
							{{ form.honeypot }}
							{{ form.content_type }}
							{{ form.object_pk }}
							{{ form.timestamp }}
							{{ form.security_hash }}
							{% if fromExcursion %}
							<input type="hidden" name="next" value="/user/excursion/{{excursionItem.pk}}/images/0/{{currentIndex}}/" />
							{% else %}
							<input type="hidden" name="next" value="/outcrop/view_images/{{outcrop.pk}}/0/{{currentIndex}}/" />
							{% endif %}
							<input type="submit" value="Post" id="id_submit" class="button" />
						</form>
					</div>
				{% else %}
					You must be logged in to be able to make comments.
				{% endif %}
        	</div>            
        </div>
{% endblock content %}
